iT邦幫忙

2023 iThome 鐵人賽

DAY 3
0
SideProject30

製作適用於網頁的台灣登山地圖系列 第 3

[Day3] 圖磚剖析之一

  • 分享至 

  • xImage
  •  

為了展示不同樣式的地圖,若您曾使用過地理資訊軟體介接第三方服務,一定對含有 z, x, y 的圖磚 URL 格式不陌生。舉例來說,開放街圖最常見的圖磚格式會長這樣:

http://{a|b|c}.tile.openstreetmap.org/{z}/{x}/{y}.png

這可能也是最知名的圖磚服務了。在瀏覽器的綱址列輸入 https://a.tile.openstreetmap.org/0/0/0.png ,即可得到一個記載全球範圍的圖磚,格式為 png 圖片:

若您曾使用過國土測繪中心(NLSC)的圖磚服務,可能也使用過類似的格式:

https://wmts.nlsc.gov.tw/wmts/EMAP5_OPENDATA/default/GoogleMapsCompatible/{z}/{y}/{x}

這一切設計都始於 Google Map 在早先時候提出的概念:「將地球投影成一個正方形,並依縮放層級持續四等分」。相關的投影方式被稱為 Web Mercator,最終成為 EPSG:3857 這個另類的座標系統,不過細節與相關歷史在此可以先略過不提。

最重要的事情是:隨著縮放層級 z 值(zoom level)的增加,本來代表全世界的單一圖磚也被持續四等分。
zoom level

每一塊圖磚可能會從左上角或左下角計算,在不同的縮放層級被賦與 z, x 與 y 值:

或者,也能使用四叉樹的方式得到單一數值,稱為 quadkey:
quadkey

為圖磚編號是為了讓伺服器端和客戶端能正確取得需要的圖磚。伺服器可以簡單的使用各種 URL 格式來提供圖磚服務,只要指定 {z}, {x}, {y} (或者 {quadkey}) 等用來代換的字串即可。例如以下的格式,在各種 GIS 軟體或前端地圖框架中都可以被正確讀取:

https://tile.example.com/{z}-{x}-{y}.png
https://tile.example.com/{x}/{y}/{z}.jpg
https://tile.example.com/?z={z}&x={x}&y={y}

許多伺服器因為會從不同原始資料,或者遵照不同的渲染方式來產生的不只一種圖磚,所以會使用 TMS 或者 WMTS 等符合規範的方式來提供圖磚服務。以上面提到的 NLSC 圖磚為例,https://wmts.nlsc.gov.tw/wmts/ 即代表這個服務遵守 WMTS (Web Map Tile Servie)規範,客戶端可以直接查詢並存取不同種類的圖磚。

不過不論提供圖磚的方式為何,每塊圖磚總是使用四分法被區分。因此我們可以進行各種簡單的計算,例如在不同縮放層級下,大小為512x512的圖磚會有以下性質:

縮放層級 解析度 (meters / pixel) 與現實世界的比例(at 96 dpi) 全球範圍(pixels)
0 156,543.0339 1:591,658,710.90 512
1 78,271.51696 1:295,829,355.45 1,024
2 39,135.75848 1:147,914,677.73 2,048
3 19,567.87924 1:73,957,338.86 4,096
4 9,783.939620 1:36,978,669.43 8,192
5 4,891.969810 1:18,489,334.72 16,384
6 2,445.984905 1:9,244,667.36 32,768
7 1,222.992452 1:4,622,333.68 65,536
8 611.4962263 1:2,311,166.84 131,072
9 305.7481131 1:1,155,583.42 262,144
10 152.8740566 1:577,791.71 524,288
11 76.43702829 1:288,895.85 1,048,576
12 38.21851414 1:144,447.93 2,097,152
13 19.10925707 1:72,223.96 4,194,304
14 9.554728536 1:36,111.98 8,388,608
15 4.777314268 1:18,055.99 16,777,216
16 2.388657133 1:9,028.00 33,554,432
17 1.194328566 1:4,514.00 67,108,864
18 0.597164263 1:2,257.00 134,217,728
19 0.298582142 1:1,128.50 268,435,456
20 0.149291071 1:564.25 536,870,912
21 0.074645535 1:282.12 1,073,741,824
22 0.037322768 1:141.06 2,147,483,648
23 0.018661384 1:70.53 4,294,967,296

上一篇
[Day2] 話說從頭-什麼是網路地圖(Web Map)?
下一篇
[Day4] 圖磚剖新之二-向量圖磚
系列文
製作適用於網頁的台灣登山地圖25
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言